<template>
	<view>
		<view class="acea-row row-middle row-between">
			<view class="module-title">
				上传照片/视频
			</view>
			<view class="example-text" @click="getImage">
				图片示例
			</view>
		</view>
		<view class="example-text-l">
			请至少添加一张照片，图片越多审核越快
		</view>
		<view class="acea-row pictrue-list">
			<view class="acea-row row-column row-center-wrapper pictrue" v-for="(item,index) in PhotoList" :key="item.url" >
				<image style="width: 218rpx;height: 172rpx;" :src="item.url" mode="" v-if="item.type=='image'" @click="previewImg" @longpress="delImg(index)">
				</image>
				<video style="width: 218rpx;height: 172rpx;" :src="item.url" mode="" v-else></video>
			</view>
			<view class="acea-row row-column row-center-wrapper pictrue" @click="uploadImg"
				v-if="PhotoList.length < 10">
				<view class="upload-icon">
					<image src="@/pages/releases/static/images/upload_icon.png" mode=""></image>
				</view>
				<view>添加照片/视频</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'image-comp',
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		watch: {
			value: {
				handler() {
					if (this.value) {
						this.initImage();
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				PhotoList: []
			};
		},
		methods: {
			initImage() {

				let re = this.separateVideosAndImages(this.value.split(','));
				this.PhotoList = re;
				
			},
			//上传照片
			uploadImg() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			delImg(index){
				let that = this;
				
				uni.showModal({
					title: '提示',
					content: '是否删除当前图片',
					success: function (res) {
						if (res.confirm) {
							that.PhotoList.splice(index,1)
							
							uni.$u.debounce(that.emitData, 500);
						} else if (res.cancel) {
							
						}
					}
				});
			},
			separateVideosAndImages(inputArray) {
				let reD = [];
				const videoExtensions = /\.(mp4|avi|mov)$/i;
				const imageExtensions = /\.(jpg|jpeg|png|gif)$/i;

				inputArray.forEach(item => {
					const extension = item.match(/\.[0-9a-z]+$/i) ? item.match(/\.[0-9a-z]+$/i)[0] : '';
					if (extension.match(videoExtensions)) {
						reD.push({
							url: item,
							type: 'video'
						});
					} else if (extension.match(imageExtensions)) {
						reD.push({
							url: item,
							type: 'image'
						});
					}
				});
				return reD;
			},
			//选择照片
			chooseImages() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					
					that.PhotoList.push({
						url: res.data.url,
						type: 'image'
					})
					uni.$u.debounce(that.emitData, 500);
				});

			},
			//选择视频
			chooseVideo() {
				let that = this;
				that.$util.uploadVideo({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					
					that.PhotoList.push({
						url: res.data.url,
						type: 'video'
					})
					uni.$u.debounce(that.emitData, 500);
				});


			},
			previewImg() {
				let that = this;
				
				this.$emit('catImg');
				// 预览图片
				uni.previewImage({
					urls: that.PhotoList.map(item=>item.url),
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			},
			emitData() {
				if (this.PhotoList.length > 0) {
					
					this.$emit('input', this.PhotoList.map(item => item.url).join(','))
				}else{
					this.$emit('input', '')
				}

			}
		}

	}
</script>

<style>
	.example-text {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
	}

	.example-text-l {
		font-size: 24rpx;
		font-weight: 400;
		padding: 24rpx 0;
		color: rgba(166, 166, 166, 1);
	}

	.example-text-m {
		padding: 0 0 0 16rpx;
		position: relative;
		margin: 24rpx 0;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
		line-height: 42rpx;
	}

	.example-text-m::after {
		position: absolute;
		content: '*';
		display: block;
		top: 0;
		left: 0;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(252, 8, 8, 1);
	}

	.pictrue-list {
		/* padding: 30rpx 0; */
	}

	.pictrue-list .pictrue {
		width: 218rpx;
		height: 172rpx;
		border-radius: 4rpx;
		background: rgba(247, 247, 247, 1);
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
		margin-bottom: 24rpx;
	}

	.pictrue-list .pictrue:nth-child(3n-1) {
		margin: 0 18rpx;
	}

	.pictrue-list .pictrue .upload-icon {
		width: 76rpx;
		height: 76rpx;
	}

	.pictrue-list .pictrue image {
		width: 218rpx;
		height: 172rpx;
	}

	.pictrue-list .pictrue video {
		width: 218rpx;
		height: 172rpx;
	}

	.pictrue-list .pictrue .upload-icon image {
		width: 76rpx;
		height: 76rpx;
	}

	.add-more-picture {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
		padding: 30rpx 0;
	}

	.jiantou-b {
		width: 24rpx;
		height: 24rpx;
		border-right: 1px solid rgba(196, 196, 196, 1);
		border-bottom: 1px solid rgba(196, 196, 196, 1);
		transform-origin: right bottom;
		transform: rotate(45deg);
		margin-left: 12rpx;
	}

	.module-title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.module-title.label-m {
		padding-right: 16rpx;
		position: relative;
	}

	.module-title.label-m::after {
		position: absolute;
		content: '*';
		display: block;
		top: 0;
		right: 0;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(252, 8, 8, 1);
	}
</style>